<template>
	<view class="content yaoqingaddindex pB100ux">
		<view class="input-group">
			<view class="input-row f14 border">
				<text class="title">邀请公司：</text>
				<view  class="tab w70" v-bind:class="{ active: isActive }" >{{ userinfodata.company_name}}</view>
				<view class="w15"></view>
			</view>
			<view class="input-row f14 border">
				<text class="title">邀请部门：</text>
				<view  class="tab w70" v-bind:class="{ active: isActive }" @tap="toggleTab('selector')">{{ resultInfodept.result}}</view>
				<view class="w15" v-if="roleid==2">
					<span class='f12 col_999'>修改</span>
					<uni-icons type="arrowright" size="20"></uni-icons>
				</view>
				<view class="w15" v-if="roleid!=2"></view>
			</view>
			<view class="input-row f14 border">
				<text class="title">邀请人员：</text>
				<view  class="tab w70" v-bind:class="{ active: isActive }" >{{ userinfodata.name}}</view>
				<view class="w15"></view>
			</view>
			<view class="input-row f14 border">
				<text class="title">到访日期：</text>
				<!--  <m-input type="text" @focus="toggleTab('date')" clearable v-model="resultInfo.result" placeholder="请选择到访时间"></m-input> -->
				<!-- <view class="tab" v-bind:class="{ active: isActive }" @tap="toggleTab('date')">{{ resultInfo.result}}</view> -->
				<view class="tab w70" v-bind:class="{ active: isActive }" @tap="toggleTab('date')">{{ resultInfo.result}} <span class="f12 pL5">（{{nowweek}}）</span></view>
				<view class="w15">
					<span class='f12 col_999'>修改</span>
					<uni-icons type="arrowright" size="20"></uni-icons>
				</view>
			</view>

			<view class="input-row f14 border">
				<text class="title">到访开始：</text>
				
				<picker mode="time" class="w70" :value="time"  @change="bindTimeChange">
					<view class="tab "  v-bind:class="{ active: isActive }">{{time?time:'请选择到访开始时间'}}</view>
				</picker>
				<view class="w15">
					<span class='f12 col_999'>修改</span>
					<uni-icons type="arrowright" size="20"></uni-icons>
				</view>
				
				<!-- <view class="tab" v-bind:class="{ active: isActive }" @tap="toggleTab('time')">{{ resultInfotime.result }}</view> -->
			</view>
			<view class="input-row f14 border">
				<text class="title">到访结束：</text>
			
				<picker mode="time" class="w70" :value="timeend"  @change="bindTimeChangeend">
					<view class="tab "  v-bind:class="{ active: isActive }">{{timeend?timeend:'请选择到访结束时间'}}</view>
				</picker>
				<view class="w15">
					<span class='f12 col_999'>修改</span>
					<uni-icons type="arrowright" size="20"></uni-icons>
				
				</view>
				<!-- <view class="tab" v-bind:class="{ active: isActive }" @tap="toggleTab('time')">{{ resultInfotime.result }}</view> -->
			</view>
			<!-- <view class="input-row f14 border">
				<text class="title">到访部门：</text>
				<view  class="tab w70" v-bind:class="{ active: isActive }" @tap="toggleTab('selector')">{{ resultInfodept.result}}</view>
				<view class="" v-if="roleid==2">
					<uni-icons type="arrowright" size="20"></uni-icons>
				</view>
			</view> -->
			<view class="input-row f14 border">
				<!-- <view style="padding-left: 15px;padding-top: 5px;">到访事由：</view> -->
				<text class="title">访客姓名：</text>
				<view class="uni-textarea tab w70" >
					<!-- <textarea auto-height v-model="yuanyou" placeholder="请填写到访缘由" /> -->
					<m-input  type="text" class="f14"  clearable v-model="vis_name" placeholder="请填写访客姓名"></m-input>
				</view>
				
				<view class="w15"></view>
			</view>
			<view class="input-row f14 border">
				<!-- <view style="padding-left: 15px;padding-top: 5px;">到访事由：</view> -->
				<text class="title">到访原由：</text>
				<view class="uni-textarea tab w70" >
					<!-- <textarea auto-height v-model="yuanyou" placeholder="请填写到访缘由" /> -->
					<m-input  type="text" class="f14"  clearable v-model="yuanyou" @blur="showyuanyou" placeholder="请填写到访原由"></m-input>
				</view>
				
				<view class="w15"></view>
			</view>
			
			
			<view class=" f14 border">
				<view class="input-row">
					<text class="title">注册方式：</text>
					<view class="uni-textarea tab w70" >
						<label class="radio" @click="chooseradio('1')"><radio value="r1"  :checked="radiostate==='1'" />简易注册</label>
						<label class="radio mL10" @click="chooseradio('2')"><radio value="r2"  :checked="radiostate==='2'" />完整注册</label>		
					</view>
					<view class="w15"></view>
				</view>
				<view class="w100">
					<div class="f14 pL10 pR10 col_999" v-if="radiostate==='1'">适合邀请贵宾和熟客来访，仅需访客输入姓名和手机号码</div>
						<div class="f14 pL10 pR10 col_999" v-if="radiostate==='2'">适合业务往来到访，访客上传身份证照片和人脸识别拍照，系统自动进行身份信息智能核对，确保人证相符</div>
				</view>
			</view>
			<!-- <view class="border f14">
				<view style="padding-left: 15px;padding-top: 5px;">请在下面填写备注：</view>
				<view class="uni-textarea" style="padding-top: 5px;"><textarea auto-height v-model="beizhu" placeholder="请填写备注" /></view>
			</view> -->
		</view>
		<view class="btn-row w70 mauto"><button type="primary" class="primary f16 " @tap="register">生成邀请函</button></view>
		<w-picker
			:visible.sync="date1visible"
			mode="date" 
			startYear="2020" 
			endYear="2030"
			:value="showyearin"
			:current="false"
			fields="day"
			@confirm="onConfirm($event,'date')"
			@cancel="onCancel"
			:disabled-after="false"
			ref="date" 
		></w-picker>
		
		    <w-picker
		        :visible.sync="date2visible"
		        mode="time" 
		        value=""
		        :current="false"
		        :second="true"
		        @confirm="onConfirm($event,'time')"
		        @cancel="onCancel"
		        ref="time" 
		    ></w-picker>
			
			    <w-picker
			        :visible.sync="date3visible"
			        mode="selector"
			        value=""
			        default-type="name"
			        :default-props="defaultProps"
			        :options="deptlist"
			        @confirm="onConfirm($event,'selector')"
			        @cancel="onCancel"
			        ref="selector" 
			    ></w-picker>
<!-- 		<w-picker mode="date" :startYear="showyearin" :endYear="showyearinend" :current="false" @confirm="onConfirm" :disabledAfter="false" ref="date" themeColor="#f00"></w-picker>

		<w-picker mode="time" :current="false" :hasSecond="false" @confirm="onConfirmtime" ref="time" step="1"></w-picker> -->
	<backnext></backnext>
	<!-- 底部导航 -->
	<footernav pagePath='user'></footernav>
	<!-- 加载动画 -->
	<loading v-if="!isloading()"></loading>
	</view>
</template>

<script>
import mInput from '@/components/m-input.vue';
import wPicker from '@/components/w-picker/w-picker.vue';
import {addappointment} from '@/common/api/appointment.js';
import {showgetlist} from '@/common/api/department.js'
import {userinfo} from '@/common/api/user.js'; 
export default {
	components: {
		mInput,
		wPicker
	},
	data() {
		return {
			date1visible:false,
			date2visible:false,
			date3visible:false,
			defaultProps:{
					label:"name",
					value:"id"
				},
			deptlist:[],
			companyid:'',
			deptid:'',
			page:1,
			pagesize:9999,
			dept_name:"",
			account: '',
			userinfodata:"",
			password: '',
			address: '',
			yuanyou: '',
			vis_name:'',
			radiostate:'2',
			beizhu: '',
			isActive: true,
			clickstate:true,
			showyearin:"2020",
			showyearinend:"2030",
			resultInfo: {
				result: '请选择到访日期',
			},
			time:"",
			timeend:'',
			resultInfotime: {
				result: '请选择到访时间',
				resultend: '请选择到访时间',
			},
			resultInfodept: {
				result: '请选择到访部门'
			},
			member_cfrequency:0,
			roleid:'',
			weeks:["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
			nowweek:'',
			
		};
	},
	onShow() { 
		// this.getdeptlist()
		      
			   
		var dateTime=new Date();
		var thisdata=new Date();
			var y=dateTime.getFullYear();
		this.showyearinend=y+5;
		
		dateTime=dateTime.setDate(dateTime.getDate()+1);
		dateTime=new Date(dateTime);
	
		var M = (dateTime.getMonth()+1 < 10 ? '0'+(dateTime.getMonth()+1) : dateTime.getMonth()+1) ;
			 
		var D = (dateTime.getDate() < 10 ? '0'+(dateTime.getDate()) : dateTime.getDate());
		var newtimes=y+'-'+M+'-'+D;
		var day = dateTime.getDay();
		this.nowweek = this.weeks[day];
		
			console.log(newtimes)
		this.showyearin=newtimes;//获取当时时间年
		this.resultInfo.result=newtimes;//获取当时时间年
		userinfo({}).then(res=>{//获取用户信息
			this.userinfodata = res.data.data
			this.companyid = res.data.data.companyid
			this.roleid = res.data.data.roleid
			if(res.data.data&&res.data.data.dept_name){
			   this.dept_name = res.data.data.dept_name
			   // this.address = res.data.data.dept_name;
			   if(this.roleid!=2){
				   this.resultInfodept.result = res.data.data.dept_name
				   this.address = res.data.data.dept_name
				   this.deptid =res.data.data.deptid
			   }
			   
			   
			   
			}
			if(res.data.member.member_cfrequency){
				this.member_cfrequency=res.data.member.member_cfrequency;				
			}
			
			if(!res.data.data.companyid){
				uni.showToast({
					icon: 'none',
					title: '当前用户没有权限操作。'
				});
				setTimeout(()=>{
					uni.reLaunch({
					    url: '/pages/user/user'
					});
				},2000)
				return;
			}
			
			if(res.data.member.member_cfrequency==0){
				uni.showToast({
					icon: 'none',
					title: '积分为0，请充值后再操作'
				});
				setTimeout(()=>{
					uni.reLaunch({
					    url: '/pages/user/user'
					});
				},2000)
				return;
			}
				
		})
		this.getdeptlist()
		},
		
	methods: {
		chooseradio(type){
			this.radiostate='';
			this.radiostate=type;
			console.log(this.radiostate)
		},
		showyuanyou(){
			this.yuanyou=this.yuanyou;
		},
		toggleTab(str) {
			if(str=='selector'){
				if(this.roleid!=2){
					return;
				}	
			}
			
			this.$refs[str].show()
		},
		onCancel(res,val){
		/*业务逻辑*/
		},
		// bindTimeChange: function(e) {
		// 	this.time = e.detail.value
		// 	this.resultInfotime.result = e.detail.value
		// },
		bindTimeChange: function(e) {
			var times=e.detail.value
			var timearr = times.split(':'); 
			if(Number(timearr[0])<8){
				uni.showToast({
					icon: 'none',
					title: '请在当天上午8：00之后进行预约'
				});
				return;
			}else if(Number(timearr[0])<=8 && Number(timearr[1])==0){
				uni.showToast({
					icon: 'none',
					title: '请在当天上午8：00之后进行预约'
				});
				return;
			}
			if(Number(timearr[0])>=18&&Number(timearr[1])>0){
				uni.showToast({
					icon: 'none',
					title: '请在当天下午18：00之前进行预约'
				});
				return;
			}
			// if(this.timeend){
			// 	var timesthis=Number(times.replace(':',''));
			// 	var timesold=Number(this.timeend.replace(':',''));	
					
			// 	if(timesthis>=timesold){
			// 		uni.showToast({
			// 			icon: 'none',
			// 			title: '预约开始不能高于预约结束'
			// 		});
			// 		return;
			// 	}
			// }
			this.time = e.detail.value
			this.resultInfotime.result = e.detail.value;
						
			// if(!this.timeend){
				// var newhour=Number(timearr[0])+1+':'+timearr[1];
				if((Number(timearr[0])+1)>=10){
					var hour2=Number(timearr[0])+1;
				}else{
					var hour2='0'+(Number(timearr[0])+1);
				}
				
				
				var newhour=hour2+':'+timearr[1];
				console.log(newhour)
				this.timeend = newhour
				this.resultInfotime.resultend = newhour
			// }
			
		},
		bindTimeChangeend: function(e) {
			var times=e.detail.value
			var timearr = times.split(':'); 
			if(Number(timearr[0])<=8&&Number(timearr[1])>0){
				uni.showToast({
					icon: 'none',
					title: '请在当天上午8：00之后进行预约'
				});
				return;
			}
			if(Number(timearr[0])>=19&&Number(timearr[1])>0){
				uni.showToast({
					icon: 'none',
					title: '请在当天下午19：00之前进行预约'
				});
				return;
			}
			if(this.time){
				var timesthis=Number(times.replace(':',''));			
				var timesold=Number(this.time.replace(':',''));	
					
				if(timesthis<=timesold){
					uni.showToast({
						icon: 'none',
						title: '预约结束不能低于预约开始'
					});
					return;
				}
			}
			this.timeend = e.detail.value
			this.resultInfotime.resultend = e.detail.value;			
			if(!this.time){
				// var hour2=(Number(timearr[0])-1)>10?Number(timearr[0])-1:'0'+Number(timearr[0])-1;
				
				if((Number(timearr[0])-1)>=10){
					var hour2=Number(timearr[0])-1;
				}else{
					var hour2='0'+(Number(timearr[0])-1);
				}
				var newhour=hour2+':'+timearr[1];
				console.log(newhour)
				this.time = newhour
				this.resultInfotime.result = newhour;
			}
			
		},
		onConfirm(res,val) {
			console.log(res)
			console.log(val);
			//如果页面需要调用多个mode类型，可以根据mode处理结果渲染到哪里;
			switch (val) {
				case 'date':
					this.resultInfo.result = res.value;
					var dateTime=new Date(res.value);
					var day = dateTime.getDay();
					this.nowweek = this.weeks[day];
					
					break;
				case 'time':
					this.resultInfotime.result = res.value
					break;
				case 'selector':
					if(res.result){
						this.resultInfodept.result = res.result
						this.address = res.result
						this.deptid =res.value
					}
					
					break;
			}
			// this.resultInfo = { ...val };
			// this.isActive = false;
		},
		// onConfirmtime(val) {
		// 	console.log(val);
		// 	//如果页面需要调用多个mode类型，可以根据mode处理结果渲染到哪里;
		// 	switch (this.mode) {
		// 		case 'time':
		// 			break;
		// 	}
		// 	this.resultInfotime = { ...val };
		// 	this.isActive = false;
		// },

		register() {
			let that=this
			/**
			 * 客户端对账号信息进行一些必要的校验。
			 * 实际开发中，根据业务需要进行处理，这里仅做示例。
			 */
			// uni.navigateTo({
			// 	url: '/pages/yaoqing/xiangqing'
			// });
			// return
			
				// setTimeout(()=>{
					
				// },5000)
			if (this.resultInfo.result == '请选择到访日期') {
				uni.showToast({
					icon: 'none',
					title: '请选择到访日期'
				});
				return;
			}
			if (this.resultInfotime.result == '请选择到访时间') {
				uni.showToast({
					icon: 'none',
					title: '请选择到访时间'
				});
				return;
			}
			this.visittime = this.resultInfo.result +" "+ this.resultInfotime.result;
			this.visittimeend = this.resultInfo.result +" "+ this.resultInfotime.resultend;
			console.log(this.visittime);

			var datex = new Date(this.visittime);
			var time1 = datex.getTime();
			console.log(time1);
			
			var datexx = new Date();
			var time2 = datexx.getTime();
			console.log("time check ")
			console.log(time1)
			
			console.log(time2);
		
			if(time1<=time2){
				uni.showToast({
					icon: 'none',
					title: '请选择正确的时间'
				});
				that.clickstate=true;
				return;
			}
			if (this.address.length == 0) {
				uni.showToast({
					icon: 'none',
					title: '请填写到访部门'
				});
				return;
			}
			if (this.yuanyou.length == 0) {
				uni.showToast({
					icon: 'none',
					title: '请填写到访缘由'
				});
				return;
			}
			
			// if (this.yuanyou.length >12) {
			// 	uni.showToast({
			// 		icon: 'none',
			// 		title: '您填写的原由超出12个字，请处理'
			// 	});
			// 	return;
			// }
			// if (this.beizhu.length == 0) {
			// 	uni.showToast({
			// 		icon: 'none',
			// 		title: '请填写备注'
			// 	});
			// 	return;
			// }
			if(this.clickstate){
				this.clickstate=false;
			const data = {
				account: this.account,
				password: this.password,
				email: this.email
			};
			
			
			
			
			
			
			
			
			
			
			
			
				addappointment({
					"visittime": this.visittime,
					"visittime2": this.visittimeend,
					"address": this.address,
					"deptid":this.deptid,
					"reson": this.yuanyou,
					vis_name:this.vis_name,
					"remark": this.beizhu,
					"is_cperson":this.radiostate
				}).then(res=>{
					console.log(res)
					this.clickstate=true;
					if (res.data.code == 200) {
					uni.showToast({
						title: res.data.message,
						icon: 'none',
						duration: 2000
					});
					let detail = {
						id: res.data.appointmentid,						
						"visittime": this.visittime,
						"address": this.address,
						"reson": this.yuanyou,
						"remark": this.beizhu,
						"status":"0"
						
					};
					uni.reLaunch({
						url: '/pages/yaoqing/xiangqing?sharebtn=YES&detailDate=' + encodeURIComponent(JSON.stringify(detail))
					});
		
					this.resultInfo.result = '请选择到访日期';
					this.resultInfotime.result= '请选择到访时间';
		
					this.address = '';
					this.yuanyou = '';
					this.beizhu = '';
					this.vis_name = '';
				} else {
					uni.showToast({
						title: res.data.message,
						icon: 'none',
						duration: 2000
					});
				}
				})
			}
		},
		getdeptlist(){
			showgetlist({
				companyid:this.companyid,
				page:this.page,
				pagesize:this.pagesize,
				type:'link',
			}).then(res=>{
			
				this.deptlist = res.data.data
				
			})
			console.log(this.deptlist)
		},
		/*选择部门*/
		deptPickerChange(){
			
		},
	}
};
</script>

<style scoped>
.yaoqingaddindex .uni-input-placeholder{font-size: 14px;}
.tab {
	line-height: 39px;
}
.content {
	display: flex;
	flex: 1;
	flex-direction: column;
	background-color: #efeff4;
}
.active {
	color: #747272;
}
.uni-textarea uni-textarea {
	padding-left: 0%;
	width: 94%;
}
.primary{
	background: #007aff;
}
.input-row{align-items: center;}
</style>
